<!-- 「欢乐赛积分明细」页面 -->
<template>
    <div class="page">
        <uni-nav-bar fixed statusBar :border="false">
            <div class="navigation-title">个人中心</div>
        </uni-nav-bar>
        <div class="container">
            <div class="main-wrapper">
                <image class="avatar" @click="clickPerson"
                    :src="userInfo?.avatar.length > 0? userInfo.avatar: IMG_URL.DEFAULT_AVATAR" mode="aspectFill">
                </image>
                <div class="info">
                    <div class="nickname">{{ userInfo?.nickname }}</div>
                    <div class="phone">{{ formatPhoneNumber(userInfo?.phone) }}</div>
                </div>
                <div class="button" @click="onCheckInClick">点击签到</div>
                <image class="icon" @click="onCheckInClick"
                    src="https://ustatic.hudongmiao.com/miao/activity/202505/rightArrow2.png" mode="aspectFill"></image>
            </div>
            <div class="score-wrapper">
                <div class="score">
                    <div class="my-score" @click="onScoreClick">
                        <div class="main">
                            <image class="icon" src="https://ustatic.hudongmiao.com/miao/activity/202505/myIcon1.png"
                                mode="scaleToFill"></image>
                            <div class="text">我的积分：{{ activity202505Store.personalPeakCompetitionInfo?.score || 0 }}
                            </div>
                        </div>
                        <image class="goto" src="https://ustatic.hudongmiao.com/miao/activity/202505/rightArrow3.png"
                            mode="aspectFill"></image>
                    </div>
                    <div class="score-detail" @click="onScoreClick">
                        <div class="main">
                            <image class="icon" src="https://ustatic.hudongmiao.com/miao/activity/202505/myIcon2.png"
                                mode="scaleToFill"></image>
                            <div class="text">积分明细</div>
                        </div>
                        <image class="goto" src="https://ustatic.hudongmiao.com/miao/activity/202505/rightArrow3.png"
                            mode="aspectFill"></image>
                    </div>
                </div>
            </div>
            <div class="invite-wrapper">
                <div class="invite">
                    <div class="fenxiao" @click="onFenxiaoClick">
                        <div class="main">
                            <image class="icon" src="https://ustatic.hudongmiao.com/miao/activity/202505/myIcon3.png"
                                mode="scaleToFill"></image>
                            <div class="text">分销婚礼娃娃
                            </div>
                        </div>
                        <div class="right">
                            <text class="text">奖励500积分</text>
                            <image class="goto"
                                src="https://ustatic.hudongmiao.com/miao/activity/202505/rightArrow3.png"
                                mode="aspectFill"></image>
                        </div>
                    </div>
                    <div class="haoyou">
                        <button class="haoyou-button" open-type="share"></button>
                        <div class="main">
                            <image class="icon" src="https://ustatic.hudongmiao.com/miao/activity/202505/myIcon4.png"
                                mode="scaleToFill"></image>
                            <div class="text">邀请好友
                            </div>
                        </div>
                        <div class="right">
                            <text class="text">邀请1位嗨喵好友获得50积分</text>
                            <image class="goto"
                                src="https://ustatic.hudongmiao.com/miao/activity/202505/rightArrow3.png"
                                mode="aspectFill"></image>
                        </div>
                    </div>
                </div>
            </div>
            <div class="other-wrapper">
                <div class="other">
                    <div class="rule" @click="onRuleClick">
                        <div class="main">
                            <image class="icon" src="https://ustatic.hudongmiao.com/miao/activity/202505/myIcon5.png"
                                mode="scaleToFill"></image>
                            <div class="text">活动规则
                            </div>
                        </div>
                        <image class="goto" src="https://ustatic.hudongmiao.com/miao/activity/202505/rightArrow3.png"
                            mode="aspectFill"></image>
                    </div>
                    <div class="contact" @click="">
                        <button class="contact-button" open-type="contact"></button>
                        <div class="main">
                            <image class="icon" src="https://ustatic.hudongmiao.com/miao/activity/202505/myIcon6.png"
                                mode="scaleToFill"></image>
                            <div class="text">联系客服
                            </div>
                        </div>
                        <image class="goto" src="https://ustatic.hudongmiao.com/miao/activity/202505/rightArrow3.png"
                            mode="aspectFill"></image>
                    </div>
                    <div class="about-us" @click="onAboutClick">
                        <div class="main">
                            <image class="icon" src="https://ustatic.hudongmiao.com/miao/activity/202505/myIcon7.png"
                                mode="scaleToFill"></image>
                            <div class="text">关于我们
                            </div>
                        </div>
                        <image class="goto" src="https://ustatic.hudongmiao.com/miao/activity/202505/rightArrow3.png"
                            mode="aspectFill"></image>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <ToLoginMask v-if="!isLogin" />
    <SignInSuccess ref="signInSuccess" />
    <RulesPopup ref="rulesPopup" :rule-key="ACTIVITY_RULE_KEY.ACTIVITY_202505"
        @popupClose="" />
    <CustomTabBar />
</template>

<script setup lang="ts">
import { reqPersonCheckIn } from "@/api/activity-202310-api";
import CustomTabBar from "@/components/CustomTabBar.vue";
import ToLoginMask from "@/components/ToLoginMask.vue";
import RulesPopup from "@/components/activity-202505/RulesPopup.vue";
import SignInSuccess from "@/components/activity-202505/SignInSuccess.vue";
import { IMG_URL } from "@/static/constant/view-constant";
import { useActivity202505 } from "@/stores/activity-202505-store";
import { useUser } from "@/stores/user";
import { navigateTo } from '@/utils/navigate';
import {
    ACTIVITY_RULE_KEY,
    IMG_URL as COMMON_IMG_URL,
} from "@/static/constant/view-constant";
const activity202505Store = useActivity202505();
const { personInfo202310 } =
  storeToRefs(activity202505Store);
const user = useUser();
const { userInfo, isLogin } = storeToRefs(user);
const signInSuccess = ref<InstanceType<typeof SignInSuccess>>();
const rulesPopup = ref<InstanceType<typeof RulesPopup>>();


onShow(async ()=>{
    await activity202505Store.setIsSignedIn()
    // await activity202505Store.setPersonInfo202310()
    await activity202505Store.setPersonalPeakCompetitionRankList()
})

const onCheckInClick = async ()=>{
  if (!isLogin.value) {
    navigateTo('login');
    return;
  }
  if (activity202505Store.isSignedIn) {
    uni.showToast({ title: '今日已签到' });
    return;
  }

  const res =await reqPersonCheckIn();
  const checkInResData = res?.data as ResponseData<{code: 200|203 }>;
  if (checkInResData?.code === 200) {
    activity202505Store.isSignedIn = true;
    signInSuccess.value?.open()
    await activity202505Store.setIsSignedIn()
    await activity202505Store.setPersonalPeakCompetitionRankList()
    return;
  }

  uni.showToast({ title: checkInResData.msg || '签到失败，请稍后重试' });

}

const onScoreClick = ()=>{
    navigateTo('score-detail-2025')
}

const onFenxiaoClick = ()=>{
    uni.navigateTo({ url: "/subpkg/mall/prodList/prodList" });
}
const onRuleClick = ()=>{
    rulesPopup.value?.open()
}

const onAboutClick = ()=>{
   navigateTo("AboutUs");
}

const clickPerson = () => {
  // 如果有userInfo，说明已经登录，跳转到编辑个人信息页面
  if (userInfo?.value?.nickname?.length > 0) {
    uni.navigateTo({ url: "/subpkg/edit-profile/edit-profile-new" });
    return;
  }
  // 如果没有userInfo，说明没有登录，跳转到登录页面
  uni.navigateTo({ url: "/subpkg/login/login" });
};


function formatPhoneNumber(phoneNumber:string) {
    // 检查输入是否为11位数字
    if (typeof phoneNumber !== 'string') {
        console.log("1212121212121")
        return '**********';
    }
    
    const phoneStr = phoneNumber.toString();
    
    if (phoneStr.length !== 11) {
        return '************';
    }
    
    // 提取前3位和后4位
    const firstThree = phoneStr.substring(0, 3);
    const lastFour = phoneStr.substring(7);
    
    // 创建中间4个星号
    const masked = '****';
    
    // 拼接结果
    return `${firstThree}${masked}${lastFour}`;
}
let inviteFriend = () => {
    return ({
      title: `@${personInfo202310.value.nickname}邀请你参加嗨喵五一欢乐赛，赢iPhone16、大疆无人机等豪礼>>`,
      path: `/pages/index?inviteKey=${personInfo202310.value.inviteKey}`,
      imageUrl: 'https://ustatic.hudongmiao.com/%20miao/activity/share-poster.png',
    });
}

onShareAppMessage(inviteFriend);
</script>

<style scoped lang="scss">
.page {

    position: relative;

    width: 750rpx;
    min-height: 110vh;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #F4F8FE;

    @media (min-aspect-ratio: 380/812) {
        min-height: 120vh;
    }
    @media (min-aspect-ratio: 330/568) {
        min-height: 150vh;
    }


    // 隐藏滚动条
    &::-webkit-scrollbar {
        display: none;
    }



    .navigation-title {
        width: 100%;
        font-size: 34rpx;
        display: flex;
        justify-content: center;
        margin-bottom: 12rpx;
        align-items: center;
        font-weight: bold;
    }



    .container {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;



        .main-wrapper {
            width: 100%;
            height: 350rpx;
            position: relative;
            // background: linear-gradient(180deg, #FE933C 0%, #FAA838 59%, #FFC77A 100%);
            background-image: url('https://ustatic.hudongmiao.com/miao/activity/202505/mybg.png');
            background-size: 100% 100%;
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
            // border-radius: 22rpx 22rpx 22rpx 22rpx;

            .avatar {
                width: 160rpx;
                height: 160rpx;
                margin-left: 50rpx;
                border-radius: 50%;
                margin-bottom: 50rpx;
            }

            .info {
                width: 250rpx;
                height: 100rpx;
                margin-bottom: 50rpx;
                margin-left: 30rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;

                .nickname {
                    width: 250rpx;
                    height: 37rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-weight: 500;
                    font-size: 37rpx;
                    color: #FFFFFF;
                    line-height: 37rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                .phone {
                    width: 250rpx;
                    height: 37rpx;
                    font-weight: 500;
                    font-size: 34rpx;
                    color: #FFFFFF;
                    line-height: 37rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            .button {
                width: 149rpx;
                height: 56rpx;
                margin-bottom: 50rpx;
                margin-left: 20rpx;
                background: #FFFFFF;
                border-radius: 28rpx;
                font-weight: 700;
                font-size: 26rpx;
                color: #F8A15B;
                line-height: 56rpx;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .icon {
                width: 13rpx;
                height: 22rpx;
                margin-bottom: 70rpx;
                margin-left: 20rpx;
            }


        }

        .score-wrapper {
            margin-top: 20rpx;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .score {
                width: 728rpx;
                height: 209rpx;
                background-color: #fff;
                border-radius: 22rpx 22rpx 22rpx 22rpx;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;

                .my-score {
                    width: 100%;
                    height: 104rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .main {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        margin-left: 40rpx;

                        .icon {
                            width: 39rpx;
                            height: 39rpx;
                        }

                        .text {
                            margin-left: 30rpx;
                            height: 37rpx;
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #000000;
                            line-height: 37rpx;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                        }
                    }


                    .goto {
                        width: 13rpx;
                        height: 22rpx;
                        margin-right: 47rpx;
                    }
                }

                .score-detail {
                    width: 100%;
                    height: 104rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .main {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        margin-left: 40rpx;

                        .icon {
                            width: 39rpx;
                            height: 39rpx;
                        }

                        .text {
                            margin-left: 30rpx;
                            height: 37rpx;
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #000000;
                            line-height: 37rpx;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                        }
                    }


                    .goto {
                        width: 13rpx;
                        height: 22rpx;
                        margin-right: 47rpx;
                    }
                }

            }
        }

        .invite-wrapper {
            margin-top: 20rpx;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .invite {
                width: 728rpx;
                height: 209rpx;
                background-color: #fff;
                border-radius: 22rpx 22rpx 22rpx 22rpx;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;

                .fenxiao {
                    width: 100%;
                    height: 104rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .main {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        margin-left: 40rpx;

                        .icon {
                            width: 39rpx;
                            height: 39rpx;
                        }

                        .text {
                            margin-left: 30rpx;
                            height: 37rpx;
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #000000;
                            line-height: 37rpx;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                        }
                    }

                    .right {
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        margin-right: 47rpx;

                        .text {
                            margin-right: 15rpx;
                            height: 37rpx;
                            font-weight: 400;
                            font-size: 21rpx;
                            color: #8D8D8D;
                            line-height: 37rpx;
                            text-align: right;
                            font-style: normal;
                            text-transform: none;
                        }

                        .goto {
                            width: 13rpx;
                            height: 22rpx;
                        }
                    }

                }


                .haoyou {
                    width: 100%;
                    height: 104rpx;
                    display: flex;
                    position: relative;
                    justify-content: space-between;
                    align-items: center;

                    .haoyou-button {
                        opacity: 0;
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                    }

                    .main {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        margin-left: 40rpx;

                        .icon {
                            width: 39rpx;
                            height: 39rpx;
                        }

                        .text {
                            margin-left: 30rpx;
                            height: 37rpx;
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #000000;
                            line-height: 37rpx;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                        }
                    }

                    .right {
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        margin-right: 47rpx;

                        .text {
                            margin-right: 15rpx;
                            height: 37rpx;
                            font-weight: 400;
                            font-size: 21rpx;
                            color: #8D8D8D;
                            line-height: 37rpx;
                            text-align: right;
                            font-style: normal;
                            text-transform: none;
                        }

                        .goto {
                            width: 13rpx;
                            height: 22rpx;
                        }
                    }

                }



            }
        }

        .other-wrapper {
            margin-top: 20rpx;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .other {
                width: 728rpx;
                height: 312rpx;
                background-color: #fff;
                border-radius: 22rpx 22rpx 22rpx 22rpx;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;

                .rule {
                    width: 100%;
                    height: 104rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .main {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        margin-left: 40rpx;

                        .icon {
                            width: 39rpx;
                            height: 39rpx;
                        }

                        .text {
                            margin-left: 30rpx;
                            height: 37rpx;
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #000000;
                            line-height: 37rpx;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                        }
                    }

                    .goto {
                        width: 13rpx;
                        height: 22rpx;
                        margin-right: 47rpx;
                    }

                }

                .contact {
                    width: 100%;
                    position: relative;
                    height: 104rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .contact-button {
                        opacity: 0;
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                    }

                    .main {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        margin-left: 40rpx;

                        .icon {
                            width: 39rpx;
                            height: 39rpx;
                        }

                        .text {
                            margin-left: 30rpx;
                            height: 37rpx;
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #000000;
                            line-height: 37rpx;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                        }
                    }

                    .goto {
                        width: 13rpx;
                        height: 22rpx;
                        margin-right: 47rpx;
                    }

                }

                .about-us {
                    width: 100%;
                    height: 104rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .main {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        margin-left: 40rpx;

                        .icon {
                            width: 39rpx;
                            height: 39rpx;
                        }

                        .text {
                            margin-left: 30rpx;
                            height: 37rpx;
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #000000;
                            line-height: 37rpx;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                        }
                    }

                    .goto {
                        width: 13rpx;
                        height: 22rpx;
                        margin-right: 47rpx;
                    }

                }

            }
        }

    }


}
</style>
